<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4">
      <!-- 页面标题 -->
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">响应式 Provide 演示</h1>
        <p class="text-gray-600">展示使用 ref 的正确响应式实现</p>
        <router-link to="/" class="inline-block mt-4 text-vue-green hover:underline">← 返回首页</router-link>
      </div>

      <!-- 说明卡片 -->
      <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
        <h3 class="font-semibold text-green-800 mb-2">✅ 预期行为</h3>
        <p class="text-green-700">
          点击"异步修改名字"按钮后，2秒后父组件中的响应式变量会改变，
          子组件会自动更新显示。这是推荐的正确实现方式。
        </p>
      </div>

      <!-- 父组件区域 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">👨‍💼 父组件</h2>
        <div class="space-y-4">
          <p class="text-gray-600">当前用户名：<span class="font-semibold text-vue-green">{{ username }}</span></p>
          <div class="flex items-center space-x-4">
            <button 
              @click="changeName"
              :disabled="isChanging"
              class="bg-vue-green text-white px-6 py-2 rounded-lg hover:bg-vue-green-dark transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {{ isChanging ? `异步修改中... (${countdown}s)` : '异步修改名字（2秒后）' }}
            </button>
          </div>
        </div>
      </div>

      <!-- 子组件区域 -->
      <ReactiveChild />

      <!-- 控制台日志 -->
      <div class="bg-gray-900 text-green-400 rounded-lg p-4 mt-6">
        <h3 class="font-semibold mb-2">📝 控制台日志</h3>
        <div class="font-mono text-sm space-y-1">
          <div v-for="(log, index) in logs" :key="index" class="opacity-80">
            {{ log }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { provide, ref } from 'vue'
import ReactiveChild from '@/components/ReactiveChild.vue'

// 响应式变量
const username = ref('小明')
const isChanging = ref(false)
const countdown = ref(0)

// 日志记录
const logs = ref<string[]>([
  '[初始化] 父组件创建，username = ref("小明")',
  '[provide] 向子组件提供响应式引用 username'
])

// 向子组件提供响应式引用
provide('username', username)

function changeName() {
  isChanging.value = true
  countdown.value = 2
  
  logs.value.push(`[${new Date().toLocaleTimeString()}] 开始异步修改操作`)
  console.log('开始异步修改操作')
  
  // 倒计时
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
  
  setTimeout(() => {
    username.value = '小红'
    isChanging.value = false
    logs.value.push(`[${new Date().toLocaleTimeString()}] 父组件异步修改 username = "${username.value}"`)
    logs.value.push('[成功] 由于提供的是响应式引用，子组件会自动更新')
    console.log('父组件异步修改 username =', username.value)
  }, 2000)
}
</script>

<style scoped>
.text-vue-green {
  color: #42b883;
}

.bg-vue-green {
  background-color: #42b883;
}

.bg-vue-green-dark {
  background-color: #369870;
}

.hover\:bg-vue-green-dark:hover {
  background-color: #369870;
}
</style>